Cocos Creator之场景切换

今天来说说 Cocos Creator 中的场景切换，那就开始实现一个简单的场景切换吧，准备素材，一张登录界面背景图片，一张微信登录的图片，一张主页面的背景图片，通过点击微信登录按钮进行场景之间的切换，相关资源，如下图所示：

第一步：

从资源管理器中拖动一张背景图片到场景编辑器中，然后在拖动微信登录的图片，具体如下图所示：

第二步：

新建 Login.js 脚本，并且声明一个 Button 作为该脚本组件的属性，因为要为该按钮设置相应的点击事件，脚本内容具体如下：

cc.Class({
   extends: cc.Component,
   properties: {
       btnWeiXin:{
           default:null,
           type:cc.Button
       },
   },
   // use this for initialization
   onLoad: function () {
       //设置按钮btnWeiXin的点击事件
       this.btnWeiXin.node.on("click",this.goHome,this);
   },

   goHome:function(){
       //场景切换
       cc.director.loadScene("Home");
   },
   // called every frame, uncomment this function to activate update callback
    update: function (dt) {

    },
});

第三步：

选择场景 Login，然后选择根节点 Canvas,在右侧属性管理器中添加脚本组件 Login.js，然后在属性管理器中为之前自定义的按钮属性赋值，即直接拖动 btn_weixin 资源到相应的属性设置框内即可，如下图所示：

第四步：

在层级管理器中选中 btnweixin 节点，然后在右侧属性管理器选择添加组件—>添加组件—>添加UI组件—>Button，创建完成之后，btnweixin节点将自动添加到 Button 的 Target 属性中，当 Button 发生变化时，target 所表示的节点资源将会发生变化，创建完成之后，具体参考如下图所示：

第五步：

为了实现跳转，创建一个新的场景 Home，保存后就可在模拟器或浏览器中看到效果了，如下图所示：

到此为止，一个简单的场景切换就完成了，当然关于场景的东西不只有这些，比如场景的创建、场景的管理以及场景资源的释放，具体细节参考官网即可。